<!DOCTYPE html>
<html lang="en">

<head>

    <head>
        <meta charset="UTF-8">
        <meta name='viewport' content='width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no'>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 引入公共样式 -->
        <link rel="stylesheet" href="../css/base.css">
        <link rel="stylesheet" href="../css/pieced_together.css">
        <link rel="stylesheet" href="../fonts/iconfont.css">
        <script src="../js/htmlFont.js"></script>
        <title>优惠券列表</title>
    </head>
</head>

<body>
    <header>
        <div class="header-top">
            <span class="iconfont icon-fanhui"></span>
            <h3>优惠券</h3>
            <img src="../images/header_app.png" alt="">
        </div>
    </header>
    <!-- 导航栏 -->
    <div class="top_nav">
        <div class="top">
            <select name="aa" id="one">
                
            </select>
            <select name="bb" id="two">
                
            </select>
            <select name="cc" id="three">
                <option value="1"><a href="javascript:;" class="jd">全部的价格</a>
                </option>
                <option value="2"><a href="javascript:;" class="jd">33</a>
                </option>
                <option value=""><a href="javascript:;" class="jd">55</a>
                </option>
            </select>
            <div class="ico">图片</div>
        </div>
    </div>

    <!-- 内容区 content -->
    <div class="content">
        <ul id="products">

        </ul>
    </div>
</body>

</html>
<script src="../lib/jquery/jquery-1.12.4.js"></script>
<script src="../lib/template/template.js"></script>
<script src="../lib/utils/utils.js"></script>
<script type="text/template" id="pieceTemp">
    {{each result as val key}}
    <option value="{{val.shopId}}"><a href="javascript:;" class="jd">{{val.shopName}}</a>
    </option>
    {{/each}}
</script>
<script type="text/template" id="piecetwoTemp">
    {{each result as val key}}
    <option value="{{val.areaId}}" class='zdy'><a href="javascript:;" class="jd">{{val.areaName}}</a>
    </option>
    {{/each}}
</script>
<script type="text/template" id="proTemp">
    {{each result as val key}}
    <li>
        <a href=""><img src="{{val.productImg}}" alt="">
            <p>打快点快点宽度</p>
            <div class="pice">
                <span>￥0.55</span>
                <span href="">去凑单</span>
            </div>
        </a>
    </li>
    {{/each}}
</script>
<script>
    $(function() {
        //1 发送ajax请求
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getgsshop",
            dataType: "jsonp",
            success: function(res) {
                // console.log(res);
                //2添加模版
                var htmlStr = template("pieceTemp", res)
                    //3 渲染页面
                $("#one").html(htmlStr);

            }
        });
        // 渲染地址信息
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getgsshoparea",
            dataType: "jsonp",
            success: function(res) {
                // console.log(bb);
                var htmlStr = template("piecetwoTemp", res)
                    //3 渲染页面
                $("#two").html(htmlStr);

            }
        });
        // 开始加载时渲染默认数据
        // 获取传递过来的id值
        star_product();

        function star_product(sId, aId) {
            var shopId = sId;
            var areaId = aId;
            $.ajax({
                type: "post",
                url: "http://193.112.55.79:9090/api/getgsproduct",
                data: {
                    shopid: shopId || 0,
                    areaid: areaId || 0
                },
                dataType: "jsonp",
                success: function(res) {
                    // console.log(res);
                    // x渲染页面
                    var htmlStr = template("proTemp", res);
                    // 渲染到ul中\
                    $("#products").html(htmlStr);
                }
            });
        }



        changeId();

        function changeId() {
            $('#one').change(function() {
                    // alert('ddd');
                    var one_id = $(this).val();
                    star_product(one_id);
                })
                // 地区改变
            $("#two").change(function() {
                var two_id = $(this).val();
                // console.log("two_id=" + two_id);
                star_product(two_id);
            })


            //发送请求 
            // star_product(one_id, two_id);
        }
        // $("select option:first").prop("selected", 'selected');
        // 注册事件
        // 
    })
</script>